<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue'

// 初始渲染前执行
onBeforeMount(() => {
  console.log('加载前')
})

// 初始渲染后触发
onMounted(() => {
  console.log('加载')
})

// 页面更新前触发
onBeforeUpdate(() => {
  console.log('更新前')
})

// 页面更新后触发
onUpdated(() => {
  console.log('更新')
})

// 测试响应变量
const num = ref(0)
</script>

<template>
  <h2>生命周期函数</h2>

  <h3>{{ num }}</h3>

  <button @click="num++">更新页面</button>
</template>

<style></style>
